<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" @submit.native.prevent>

      <el-form-item label="场馆" prop="venueId">
        <el-select v-model="queryParams.venueId" placeholder="场馆选择" clearable filterable style="width: 240px">
          <el-option v-for="dict in this.lotVenueList" :key="dict.id" :label="dict.name" :value="dict.id" />
        </el-select>
      </el-form-item>

      <el-form-item label="时间">
        <!-- <el-date-picker v-model="dateRange" style="width: 340px" type="datetimerange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker> -->
        <el-date-picker v-model="queryParams.auctionData" type="date" placeholder="选择日期" value-format="yyyy-MM-dd">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table :height="tableHeight" v-loading="loading" :data="list" stripe border>
      <el-table-column label="序号" type="index" align="center" width="60" />
      <el-table-column label="场馆" prop="" align="center">
        <template slot-scope="scope">
          <span>{{selectDictLabel(lotVenueList,scope.row.venueId)}}</span>
        </template>
      </el-table-column>
      <el-table-column label="商品名称" prop="goodsName" align="center" width="120" />
      <el-table-column label="出价人" prop="userNickName" align="center" />
      <el-table-column label="手机号码" prop="userPhone" align="center" width="120" />
      <el-table-column label="原始底价" prop="goodsBasePrice" align="center" />
      <el-table-column label="当前底价" prop="auctionBase" align="center" />
      <el-table-column label="本次加价(银)" prop="goodPriceUnit" align="center" width="100">
        <template slot-scope="scope">                          
          <span>{{scope.row.auctionPrice-scope.row.auctionBase}}</span>
        </template>
      </el-table-column>
      <el-table-column label="出价金额" prop="auctionPrice" align="center" />
      <!-- <el-table-column label="出价次数" prop="auctionOrder" align="center" /> -->
      <el-table-column label="状态" prop="" align="center" width="120">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.auctionValid == 2">{{selectDictLabel(auctionValid,scope.row.auctionValid)}}</el-tag>
          <span v-else>{{selectDictLabel(auctionValid,scope.row.auctionValid)}}</span>
        </template>
      </el-table-column>
      <el-table-column label="出价方式" prop="priceUnitType" align="center">
        <template slot-scope="scope">
  <span>{{selectDictLabel(priceUnitType,scope.row.priceUnitType)}}</span>
</template>
      </el-table-column>
      <el-table-column label="出价时间" prop="actionTime" min-width="180" align="center" />
    </el-table>

    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
  </div>
</template>

<script>
import { listAppAuctionGift, updateCash } from "@/api/vip/vip.js";
import { listVenue } from "@/api/showroom/venue";

export default {
  name: "OfferPrice", //出价记录
  data() {
    return {
      // 列表数据
      list: [],
      dateRange: [],
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,

      // 是否显示弹出层
      open: false,
      updateCashShow: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: this.global.pageSize,
      },
      pageNum: 1,

      lotVenueList: [],

      priceUnitType: [{ label: '现金', value: 0 }, { label: '金积分', value: 1 }, { label: '银积分', value: 2 }],
      auctionValid: [{ label: '无效', value: 0 }, { label: '竞购出价', value: 1 }, { label: '竞购成功', value: 2 }],


    };
  },
  watch: {
    "queryParams": {
      deep: true,
      handler: function (newV, oldV) {
        if (this.pageNum == newV.pageNum) {
          this.handleQuery();
        } else {
          this.pageNum = newV.pageNum;
        }
      },
    },
    dateRange(newV, oldV) {
      if (newV) {
        if (newV.length >= 2) {
          this.queryParams.createTimeStart = String(newV[0]);
          this.queryParams.createTimeEnd = String(newV[1]);
        }
      }
      else {
        this.queryParams.createTimeStart = undefined;
        this.queryParams.createTimeEnd = undefined;
      }
      this.getList();
    }
  },
  computed: {
    tableHeight() {
      return 'calc(100vh - 280px)'
    }
  },
  created() {
    this.getVenueList();

    this.getList();
  },

  methods: {
    getList() {
      this.loading = true;
      listAppAuctionGift(this.queryParams).then((response) => {
        if (response.code == 200) {
          this.list = response.data;
          this.total = response.total;
        }
        this.loading = false;
      }).catch(err => {
        this.loading = false;
      });
    },

    getVenueList() {
      listVenue(this.queryParams)
        .then((response) => {
          if (response.code == 200) {
            let venueList = response.data;
            this.lotVenueList = venueList.filter((item, index, arr) => {
              return item.venueType == 0;
            })
            this.lotVenueList.map(item => {
              item.value = item.id;
              item.label = item.name
            })
          }
        })
        .catch((err) => { });
    },

    // 表单重置
    reset() {
      this.resetForm("form");
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },

    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.queryParams.createTimeStart = undefined;
      this.queryParams.createTimeEnd = undefined;
      this.dateRange = undefined;
      this.resetForm("queryForm");
      this.handleQuery();
    },


    cancel() {
      this.open = false;
      this.$refs.handleView.reset();
    }
  },
};
</script>
<style scoped>
</style>
